<template>
    <view class="container">
        <view class="header">
            <text class="title">插槽（Slot）使用示例</text>
            <text class="subtitle">展示Vue 3插槽功能</text>
        </view>

        <!-- 基础用法：使用title属性 -->
        <card title="基础卡片">
            <text>这是卡片的内容区域，使用了默认插槽。</text>
        </card>

        <!-- 使用具名插槽 -->
        <card>
            <template #header>
                <view class="custom-header">
                    <text class="custom-title">自定义头部</text>
                    <!-- 使用emoji替代uni-icons -->
                    <text class="star-icon">⭐</text>
                </view>
            </template>

            <text>这是使用具名插槽的卡片内容123。</text>

            <template #footer>
                <view class="custom-footer">
                    <button class="action-button" @click="handleAction">操作按钮</button>
                </view>
            </template>
        </card>

        <!-- 使用作用域插槽的列表组件 -->
        <card title="用户列表">
            <template #footer>
                <view class="list-footer">
                    <text>共 {{ users.length }} 个用户</text>
                </view>
            </template>

            <view class="user-list">
                <user-item v-for="user in users" :key="user.id" :user="user">
                    <!-- 作用域插槽：向子组件传递数据 -->
                    <template #actions="{ user }">
                        <button class="small-button" @click="editUser(user)">
                            编辑
                        </button>
                        <button class="small-button danger" @click="deleteUser(user)">
                            删除
                        </button>
                    </template>
                </user-item>
            </view>
        </card>

        <!-- 带有复杂内容的卡片 -->
        <card>
            <template #header>
                <view class="complex-header">
                    <view class="header-content">
                        <text class="complex-title">复杂内容卡片</text>
                        <text class="header-subtitle">包含多种元素的卡片</text>
                    </view>
                    <view class="header-actions">
                        <text class="more-icon" @click="showMenu">⋯</text>
                    </view>
                </view>
            </template>

            <view class="complex-content">
                <image class="content-image" src="/static/logo.png" mode="aspectFit"></image>
                <view class="content-text">
                    <text>这是复杂内容区域，包含了图片和文本。</text>
                </view>
            </view>

            <template #footer>
                <view class="complex-footer">
                    <button class="footer-button">点赞</button>
                    <button class="footer-button">分享</button>
                    <button class="footer-button primary">评论</button>
                </view>
            </template>
        </card>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import card from '../components/card.vue'
import userItem from '../components/user-item.vue'

// 模拟用户数据
const users = ref([
    { id: 1, name: '张三', email: 'zhangsan@example.com', avatar: '/static/avatar1.png' },
    { id: 2, name: '李四', email: 'lisi@example.com', avatar: '/static/avatar2.png' },
    { id: 3, name: '王五', email: 'wangwu@example.com', avatar: '/static/avatar3.png' }
])

// 操作函数
const handleAction = () => {
    uni.showToast({
        title: '操作按钮被点击',
        icon: 'none'
    })
}

const editUser = (user) => {
    uni.showToast({
        title: `编辑用户: ${user.name}`,
        icon: 'none'
    })
}

const deleteUser = (user) => {
    uni.showModal({
        title: '确认删除',
        content: `确定要删除用户 ${user.name} 吗？`,
        success: (res) => {
            if (res.confirm) {
                users.value = users.value.filter(u => u.id !== user.id)
                uni.showToast({
                    title: '删除成功',
                    icon: 'success'
                })
            }
        }
    })
}

const showMenu = () => {
    uni.showToast({
        title: '显示菜单',
        icon: 'none'
    })
}
</script>

<style scoped lang="scss">
.container {
    padding: $uni-spacing-row-base;
    background-color: $uni-bg-color-grey;
    min-height: 100vh;
}

.header {
    text-align: center;
    margin-bottom: $uni-spacing-row-lg;
    padding: $uni-spacing-col-lg 0;
}

.title {
    font-size: $uni-font-size-title;
    font-weight: bold;
    color: $uni-text-color;
    display: block;
    margin-bottom: $uni-spacing-col-base;
}

.subtitle {
    font-size: $uni-font-size-base;
    color: $uni-text-color-grey;
}

.custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-title {
    font-size: $uni-font-size-lg;
    font-weight: bold;
    color: $uni-color-primary;
}

.star-icon {
    font-size: $uni-font-size-lg;
}

.custom-footer {
    display: flex;
    justify-content: flex-end;
}

.action-button {
    background-color: $uni-color-primary;
    color: $uni-text-color-inverse;
    border: none;
    padding: $uni-spacing-col-sm $uni-spacing-row-base;
    border-radius: $uni-border-radius-base;
}

.user-list {
    margin-top: $uni-spacing-col-base;
}

.list-footer {
    text-align: center;
    color: $uni-text-color-grey;
    font-size: $uni-font-size-sm;
}

.small-button {
    background-color: $uni-color-primary;
    color: $uni-text-color-inverse;
    border: none;
    padding: $uni-spacing-col-sm $uni-spacing-row-sm;
    border-radius: $uni-border-radius-base;
    font-size: $uni-font-size-sm;
    margin-right: $uni-spacing-row-sm;

    &.danger {
        background-color: $uni-color-error;
    }
}

.complex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content {
    display: flex;
    flex-direction: column;
}

.complex-title {
    font-size: $uni-font-size-lg;
    font-weight: bold;
    color: $uni-text-color;
}

.header-subtitle {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
}

.more-icon {
    font-size: $uni-font-size-lg;
    padding: $uni-spacing-col-sm;
}

.complex-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-image {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: $uni-spacing-col-base;
}

.content-text {
    text-align: center;
    color: $uni-text-color;
}

.complex-footer {
    display: flex;
    justify-content: space-between;
}

.footer-button {
    flex: 1;
    background-color: $uni-bg-color;
    color: $uni-text-color;
    border: 1rpx solid $uni-border-color;
    padding: $uni-spacing-col-base;
    border-radius: $uni-border-radius-base;
    margin: 0 $uni-spacing-row-sm;

    &.primary {
        background-color: $uni-color-primary;
        color: $uni-text-color-inverse;
        border-color: $uni-color-primary;
    }
}
</style>